<template>
  <div class="main">
    <div class="top">
      <h1>这是第一篇文章</h1>
      <ul class="ul1">
        <li v-for="list in res.lists" :key="list.id">{{ list.li }}</li>
      </ul>
    </div>
    <div class="content">
      <ul class="ul2">
        <li v-for="post in res.pic" :key="post.id">{{ post.p }}</li>
      </ul>
    </div>
    <div class="bottom">
      <ul>
        <li>上一篇：无</li>
        <li>下一篇：<router-link to="#">最涨薪PHP项目-PHP微信公众平台开发</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      res: resData,
    };
  },
};
let resData = {
  lists: [
    {
      li: "栏目：PHP",
    },
    {
      li: "作者：传智播客",
    },
    {
      li: "发表时间：05-31 14:50:07",
    },
    {
      li: "阅读：15次",
    },
  ],
  pic: [
    {
      p: "欢迎使用PHP内容管理系统！",
    },
    {
      p: "这是一篇系统自动生成的文章，您可以修改或删除。",
    },
  ],
};
</script>

<style scoped>
.main{
  background: #fff;
  margin-right: 15px;
  margin-top: 13px;
}

h1{
  text-align: center;
  padding-top: 20px;
}

.top{
  padding: 10px;
}

.ul1{
  height: 35px;
  line-height: 35px;
  border-bottom: 2px dashed #cccccc;
  display: block;
  /* padding: 0; */
  padding-left: 130px;
}

.ul1 li{
  list-style: none;
  float: left;
  margin-left: 30px;
}

li{
  list-style: none;
}

.ul2 li{
  display: block;
  padding-bottom: 20px;
 
}

.ul2{
  border-bottom: 2px dashed #cccccc;
  padding: 10px;
  margin: 0;
}

.content{
  padding: 10px;
}

/* .bottom{
  padding-left: 200px;
} */

.bottom{
  height: 40px;
  margin-top: -15px;
  margin-left: 150px;
}

.bottom li{
  float: left;
  padding: 10px;
}

a{
  text-decoration: none;
}
</style>